<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <title>运维管理平台</title>
  <link rel="icon" href="/static/favicon.ico" sizes="64x64" />
  <style>
    html {
      height: 100%;
    }

    body {
      background-color: #ffffff;
      margin: 0px;
      height: 100%;
      color: #555;
      font-family: 'inconsolata';
      font-size: 15px;
      /* line-height: 18px; */
      overflow: hidden;
    }

    .el-notification.left {
      left: 60px !important;
    }

    #progress {
      height: 1px;
      display: inline-block;
      background-color: #0078D7;
      box-shadow: 0 0 5px 2px #0078D7;
      width: 0;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 9999;
      border-radius: 5px;
    }

    .el-dropdown {
      vertical-align: top;
    }

    .el-dropdown+.el-dropdown {
      margin-left: 0px;
    }

    .el-icon-arrow-down {
      font-size: 12px;
    }

    #viewer {
      position: absolute;
      border: 0px;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      /* overflow: scroll; */
    }

    .clickRightMenu {
      width: 159px;
      font-size: 12px;
      position: absolute;
      text-align: left;
      padding: 2px 0;
      border: 1px solid #ccc;
      /* display: none; */
      z-index: 100;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.35);
      font-family: Microsoft YaHei Regular;
    }

    .clickRightMenu li {
      list-style: none;
      line-height: 28px;
      font-size: 14px;
      text-align: left;
      padding: 5px 30px;
    }

    .clickRightMenu li:hover {
      background-color: #2d61a8;
      cursor: pointer;
      color: white;
      border-radius: 2px;
    }

    .measure {
      position: absolute;
      right: 300px;
      bottom: 15px;
      background: #fff;
      border-radius: 5px;
      box-shadow: 0 1px 9px rgba(0, 0, 0, 0.3);
      width: 280px;
      min-height: 140px;
      letter-spacing: 2px;
    }

    .measure span {
      display: block;
      text-align: center;
      height: 20px;
      line-height: 20px;
      padding: 10px;
      background: #0078D7;
      color: #fff;
    }

    .measure span i {
      font-style: normal;
      font-size: 10px;
      float: right;
      cursor: pointer;
    }

    #measure_title {
      font-weight: normal;
      float: left;
    }

    .measure p {
      display: block;
      padding: 10px;
      color: #333;
      font-size: 14px;
    }

    .engine-modal {
      position: absolute;
      z-index: 100000;
      left: 0px;
      top: 40px;
      bottom: 0px;
      right: 0px;
      background: url(/static/img/background_04.jpeg) no-repeat center;
      background-size: cover;
      z-index: 200;
      padding: 0 0 0 40px;
    }

    .group {
      display: flex;
      flex-direction: row;
    }

    .group-item {
      background: #E4EBF5;
      margin-left: 20px;
      margin-top: 20px;
      font-size: 16px;
      color: #6D8599;
      width: 200px;
      height: 110px;
      padding: 15px 0px 0 20px;
      border-radius: 4px;
      box-shadow: 0 0 2px #0078D7;
    }

    .factoryNum {
      font-size: 60px;
      color: #0078D7;
    }

    .group-item.right {
      width: 280px;
      height: 110px;
      position: relative;
    }

    .group-item.right span {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }

    /* .engine {
      margin-right: 0.2rem;
      position: absolute;
      z-index: 2000;
      top: 7px;
      right: 477px;
      cursor: pointer;
    }

    s {
      text-decoration: none;
      font-size: 8px;
      border: 1px solid #fff;
      color: #fff;
      border-radius: 4rem;
      padding: 1px 4px;
    } */

    .tag-btns {
      display: flex;
      border-radius: 4px;
      background: rgba(255, 255, 255, .9);
      font-size: 14px;
    }

    .del-btn,
    .view-btn {
      cursor: pointer;
      color: #0078D7;
      padding: 4px 5px;
    }

    .view-btn:hover {
      color: #fff;
      background: #0078D7;
    }

    .del-btn:hover {
      color: #fff;
      background: #0078D7;
    }

    #view_tag {
      /* width: 500px; */
      /* height: 200px; */
      position: absolute;
      left: 10%;
      top: 15%;
      display: none;
      z-index: 2;
    }

    #view_img {
      display: block;
      max-height: 750px;
    }

    #close_view {
      cursor: pointer;
      position: absolute;
      font-style: normal;
      right: -30px;
      color: #fff;
      display: block;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #fff;
      line-height: 20px;
      text-align: center;
    }

    #close_view:hover {
      border-color: #0078D7;
      color: #0078D7;
    }

    .html-marker {
      background: rgba(255, 255, 255, .6);
      padding: 5px 10px;
      font-size: 14px;
      box-shadow: 0 0 8px -1px black;
      color: black;
    }

    #percent {
      font-size: 35px;
      color: #0078D7;
      line-height: 100px;
      text-align: center;
      width: 100px;
      height: 100px;
      position: absolute;
      top: 40%;
      left: 50%;
      border: 5px solid #0078D7;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.7);
    }

    #bodyflag {
      height: 100%;
      background: rgba(118, 184, 249, 1.0);
    }


    .tips_show {
      border-radius: 8px;
      background: rgba(34, 52, 85, 0.6);
      width: 100px;
      height: 32px;
    }

    .tips_parent {
      position: relative;
      display: flex;
      flex-direction: row;
    }

    .tip-icon {
      width: 32px;
      height: 32px;
      border-radius: 8px;
    }

    .tips-cont {
      width: calc(130px - 48px);
      padding: 2px;
    }

    .p-text-first {
      font-size: 12px;
      color: #ffffff;
      overflow: hidden;
      margin-top: 0;
      margin-bottom: 0;
    }

    .p-text-other {
      font-size: 9px;
      color: #ffffff;
      overflow: hidden;
      margin-top: 2px;
      margin-bottom: 0;
    }

    .line {
      position: absolute;
      height: 76px;
      width: 3px;
      left: 45px;
      top: 45px;
    }

    .scene_ball {
      position: relative;
      width: 20px;
    }

    .ball_circle {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgb(127, 251, 250);
      border: 2px solid rgb(56, 62, 150);

      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .ball_square {
      width: 20px;
      height: 20px;
      background: rgb(125, 253, 125);
      border: 2px solid rgb(56, 62, 150);

      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .ball_diamond {
      width: 20px;
      height: 20px;
      transform: rotateZ(45deg);
      /* clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); */
      background: rgb(255, 255, 68);
      border: 2px solid rgb(56, 62, 150);

      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-transform:rotateZ(-45deg);
    }

    .ball_line {
      background: rgb(56, 62, 150);
      margin: 0 auto;
      height: 20px;
      width: 2px;
    }

    .ball_diamond_text {
      transform: rotateZ(-45deg);
    }

    .ball_common_text {
      transform: rotateZ(0deg);
    }
  </style>

</head>

<script type="text/javascript" src="./static/config.js"></script>
<script type="text/javascript" src="./static/build.js"></script>
<script type="text/javascript" src="./static/3dEngine/js/3dEngine-m.js"></script>
<script type="text/javascript" src="./static/resource/free.player.1.8.js"></script>

<script type="text/javascript">
  var a = 0;
  (function (designWidth, maxWidth) {
    // animationFrame()
    var doc = document,
      win = window;
    var docEl = doc.documentElement;
    var tid;
    var rootItem, rootStyle;
    function refreshRem() {
      var width = docEl.getBoundingClientRect().width;
      if (!maxWidth) {
        maxWidth = 540;
      };
      if (width > maxWidth) {
        width = maxWidth;
      }
      var rem = width * 100 / designWidth;
      rootStyle = "html{font-size:" + rem + 'px !important}';
      rootItem = document.getElementById('rootsize') || document.createElement("style");
      if (!document.getElementById('rootsize')) {
        document.getElementsByTagName("head")[0].appendChild(rootItem);
        rootItem.id = 'rootsize';
      }
      if (rootItem.styleSheet) {
        rootItem.styleSheet.disabled || (rootItem.styleSheet.cssText = rootStyle)
      } else {
        try {
          rootItem.innerHTML = rootStyle
        } catch (f) {
          rootItem.innerText = rootStyle
        }
      }
      docEl.style.fontSize = rem + "px";
    };
    refreshRem();
    win.addEventListener("resize", function () {
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300);
    }, false);
    win.addEventListener("pageshow", function (e) {
      if (e.persisted) {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
      }
    }, false);
    if (doc.readyState === "complete") {
      doc.body.style.fontSize = "16px";
    } else {
      doc.addEventListener("DOMContentLoaded", function (e) {
        doc.body.style.fontSize = "16px";
      }, false);
    }



    // win.addEventListener('message', (e) => {
    //   debugger
    //   console.log("message - message");
    //   console.log(e.data);
    //   if (e.data.type === 'myData') {
    //     // TODO 使用父组件传递的初始化数据
    //   }
    // });


  })(1334, 1334);

</script>

<body>
  <video id="video2" autoplay style="display:none"></video>
  <div id="bodyflag">
    <div id="app">
    </div>
    <div id="viewer"></div>
  </div>
  <div id="rightContent" style="display:none;position:absolute; left: 0px;top: 0px;"></div>
  <div id="measure" class="measure" style="display: none;">
    <span><b id="measure_title"></b><i id="closeMeasure" onclick="closeMeasure()">X</i></span>
    <p id="measureTxt">
    </p>
  </div>
  <div id="view_tag">
    <i id="close_view" onclick="closeView()">X</i>
    <img id="view_img" src="" alt="">
  </div>
  <div id="percent"></div>
</body>

<script>
  var measureType = ''
  var bCtrl = false
  var elementType = 0 //0为颜色，1为半透明，2为隐藏
  var modelName = 'rst'
  var nameArray = ['spc1210']
  var modelArray = ['62']
  var currentIndex = 0
  var clickMode = ''
  // var measureIndex = 0;
  var flyArray = []
  var currentElement = ''
  var clickGlids = ''
  var currentPos = ''
  var markerArray = []
  var meterArray = [];
  var gridArray = [];
  var Muster = ''; //集合
  var markerviewArray = [];
  var measureResult = [];
  var testview = '';
  var bWireFrame = false;
  var modelLocationList = [];
  var tagId = '';
  var tagData = '';
  var delMarker = [];
  var delMarkPer = false;
  var tagImg = '';
  var searchTag = false;
  var CID = '';
  var PData = null;
  var lang = '';
  var dcsArray = [];
  var dcsmarker = [];
  // getDefaultView()
  function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg))
      return unescape(arr[2]);
    else
      return null;
  };
  // console.log(getCookie('lang'))
  lang = getCookie('lang');
  var measureTitle = document.getElementById('measure_title')
  if (lang === 'en') {
    measureTitle.innerText = 'Measure Result'
  } else if (lang === 'zh') {
    measureTitle.innerText = '测量结果'
  } else if (lang === 'jap') {
    measureTitle.innerText = '測定結果'
  }

  AddModel(window.R_config.modelJsonUrl, window.R_config.modelId, 1.25);
  window.document.onkeydown = function () {
    if (window.event.ctrlKey) {
      bCtrl = true;
    }
    if (window.event.shiftKey) {
      StartRectCheck();
    }
  }

  window.document.onkeyup = function () {
    if (!window.event.ctrlKey) {
      bCtrl = false;
    }
    if (!window.event.shiftKey) {
      CloseRectCheck();
    }
  }

  var t = Date.now();

  function sleep(d) {
    while (Date.now - t <= d);
  }

  var xtest = 0;
  function myclip() {
    xtest += 0.1;
    PlateClip('x-min', xtest);
  }

  // 视角cuble显示
  EngineConfig("viewer", false);
//   SetLightMode(0);
  SetShowNum(3000); //控制每次动态加载的切片数量，如果觉得加载时间长就调小一点
  SetBackColor(164,178,188, 1.0);
  //SetMouseMode(1);
  function resetView() {
    SetCameraMode(0)
    SetView(window.R_config.initView)
  }
  function pt_TouchToClick(dom, derect, callback) {
    $("body").on('touchstart', dom, function (event) {
      let x = 0, x1 = 0, flag = 0, atrsy = !derect ? "pageX" : "pageY", e = event || window.event;
      x = e.targetTouches[0][atrsy];
      $(this).on("touchend", function (event) {
        let e = event || window.event;
        x1 = e.changedTouches[0][atrsy], flag = x != x1 ? 0 : 1;
      })
      setTimeout(() => { flag && callback.call(this); })
    })
  }
  function onHtmlClick() {
    alert('添加的html标签');
  }
  function onLabelClick(val) {
        alert('添加的onLabelClick标签');

        sendMsgToParent("on-ball-click", val);
    // $.ajax({
    //   url: window.R_config.spc_url + '/api/ProTreeDiagram/getPropertyInfo',
    //   type: 'POST',
    //   async: false,
    //   contentType: 'application/json;charset=utf-8',
    //   data: JSON.stringify({
    //     BitNumber: val,
    //     MileageID: window.R_config.modelId
    //   }),
    //   dataType: 'json',
    //   success: (data) => {
    //     if (data.code === 0) {
    //       window.Muster = val
    //       console.log('222222', data.data)
    //       vm.$store.commit("syncAttrData", data.data);
    //       vm.$store.commit('showModal', {
    //         name: 'attrs',
    //         show: true,
    //         left: '',
    //         right: '0',
    //         data: null
    //       })
    //       flyByBitNumber(val)
    //     }
    //   },
    //   error: () => {
    //     return false
    //   }
    // })
  }
  function flyByBitNumber(val) {
    // $.ajax({
    //   url: window.R_config.spc_url + '/api/ModelDataSPC/GetModelData',
    //   type: 'POST',
    //   async: false,
    //   contentType: 'application/json;charset=utf-8',
    //   data: JSON.stringify({
    //     glid: '',
    //     BitNumber: val,
    //     MileageID: window.R_config.modelId
    //   }),
    //   dataType: 'json',
    //   success: (res) => {
    //     if (res.code === 0) {
    //       let glids
    //       if (res.data.glid.length > 1) {
    //         glids = res.data.glid.join("#");
    //       } else {
    //         glids = res.data.glid[0];
    //       }
    //       FlyTo(glids, true, 2.8)
    //     }
    //   },
    //   error: () => {
    //     return false
    //   }
    // })
  }
  var rightClick = null
  function OnClickPositionByRightMouse(position) {
    currentPos = position;
    console.log('rightClick' + position);
    rightClick = 0
  }

  function OnClickPosition(position) {
    currentPos = position;
    console.log('点击位置' + position);
    // vm.$store.commit('setModelClickPos', position)
    // vm.$store.commit('showModal', {
    //   name: 'attrs',
    //   show: true,
    //   left: '',
    //   right: '0',
    //   data: null
    // })
  }

  function OnLodProcess() {
    //SetClickMode(0);
  };

  function OnLodFinish() {
    if (elementType == 0) {
      SetElementColor(currentElement || clickGlids, 255, 0, 0);
    } else if (elementType == 1) {
      SetElementColor(currentElement, 255, 255, 0);
    } else if (elementType == 2) {
      SetElementColor(currentElement, 0, 0, 255);
    } else if (elementType == 3) {
      SetElementColor(currentElement, window.rustColor[0], window.rustColor[1], window.rustColor[2]);
      window.elementType = 0
    }
  };
  function OnModelLoaded(tag) {
    if (tag === 'tag')
      return;

    // let user = JSON.parse(localStorage.user)
    modelArray.push(tag)
    if (currentIndex < nameArray.length - 1) {
      currentIndex++;
      AddModel(window.R_config.modelJsonUrl, window.R_config.modelId)
      SetView(window.R_config.initView)
    } else {
      // AddEnvModel(window.R_config.modelURL, window.R_config.modelX, window.R_config.modelY, window.R_config.modelZ, false, true)
      AddEnvModel(window.R_config.modelURL, -27000, 10000, -16200, false, true);
      SetView(window.R_config.initView)
      // SetSkyDome('/static/3dEngine/images/around_bg.jpg')
    }

    sendMsgToParent("loadSceneFinish", {});
  }
  function OnLoadModelProcess(value) {
    var a = document.getElementById('percent')
    a.innerText = Math.floor(value * 100) + '%'
    if (value === 1) {
      a.style.display = 'none'
      //   vm.$store.commit('showModal', {
      //   name: 'dataMonitorTable',
      //   show: true,
      //   left: '70px',
      //   top: '40px',
      //   data: null
      // })
    } else {
      a.style.display = 'block'
    }
  }
  function getBitNumbers(guids) {
    // $.ajax({
    //   url: window.R_config.spc_url + '/api/ModelDataSPC/GetModelData',
    //   type: 'POST',
    //   async: false,
    //   contentType: 'application/json;charset=utf-8',
    //   data: JSON.stringify({
    //     glid: guids,
    //     BitNumber: '',
    //     MileageID: window.R_config.modelId
    //   }),
    //   dataType: 'json',
    //   success: (data) => {
    //     if (data.code === 0) {
    //       goujianListId = data.data.glid
    //       currentElement = goujianListId.join('#')
    //       clickGlids = goujianListId.join('#')
    //       Muster = data.data.BitNumber
    //     } else {
    //       currentElement = guids
    //       clickGlids = guids
    //       Muster = ''
    //     }
    //     PData = {
    //       type: "getproperty",
    //       data: {
    //         id: currentElement
    //       }
    //     }
    //   },
    //   error: () => {
    //     return false
    //   }
    // })
  }
  function getDefaultView() {
    // $.ajax({
    //   url: window.R_config.spc_url + '/api/ViewManagement/GetViewManageList',
    //   type: 'POST',
    //   async: false,
    //   contentType: 'application/json;charset=utf-8',
    //   headers: {
    //     'Access-Control-Allow-Origin': '*'
    //   },
    //   data: JSON.stringify({
    //     MileageID: window.R_config.modelId
    //   }),
    //   dataType: 'json',
    //   success: (data) => {
    //     data.data.map(n => {
    //       if (n.IsDefault) {
    //         window.R_config.initView = n.Position
    //       }
    //     })
    //   }
    // })
  }
  function getBitGid(val, type) {
    // $.ajax({
    //   url: window.R_config.spc_url + '/api/PidSvg/GetBitGId',
    //   type: 'POST',
    //   async: false,
    //   contentType: 'application/json;charset=utf-8',
    //   headers: {
    //     'Access-Control-Allow-Origin': '*'
    //   },
    //   data: JSON.stringify({
    //     Glid: '',
    //     BitNumber: val,
    //     MileageID: window.R_config.modelId,
    //     CID: CID
    //   }),
    //   dataType: 'json',
    //   success: (data) => {
    //     if (data.code === 0) {
    //       if (data.data.length === 1) {
    //         window.svgFUNC.cTDG(data.data[0].BitNumber, data.data[0].GId)
    //       } else {
    //         window.svgFUNC.cTDG(data.data[0].BitNumber, data.data)
    //       }
    //       var svg = document.getElementById('zoomSvg')
    //       window.SVGDATA.scale = 100
    //       svg.style.transformOrigin = ''
    //       svg.style.transform = 'matrix(1, 0, 0, 1, 0, 0)'
    //       document.getElementById('dragDiv').style.left = '0'
    //       document.getElementById('dragDiv').style.top = '0'
    //       document.getElementsByClassName('draggable')[0].style.left = '0'
    //       document.getElementsByClassName('draggable')[0].style.top = '0'
    //     } else {
    //       window.svgFUNC.cTDG('', '')
    //     }
    //   },
    //   error: () => {
    //     return false
    //   }
    // })
  }
  function clickCCTV(val) {
    console.log(val)
    vm.$store.commit('setSelVideo', val)
  }
  // var a = []
  function OnElementSelected(id) {
    console.log('构件id---' + id)
    // a.push(id)
    // console.log(Array.from(new Set(a)))
    getBitNumbers(id)
    if (document.getElementById('dwglist')) 
      getBitGid(Muster)
    if (!bCtrl) {
      ResetAllElement();
    }

    if (elementType == 0) {
//       SetElementColor(currentElement || clickGlids, 255, 0, 0);
      SetElementColor(id, 255, 0, 0);
    } else if (elementType == 1) {
      SetElementColor(currentElement, 255, 255, 0);
    } else if (elementType == 2) {
      SetElementColor(currentElement, 0, 0, 255);
    } else if (elementType == 3) {
      SetElementAlpha(currentElement, 0.4);
    } else if (elementType == 4) {
      SetElementVisible(currentElement, false);
    }
  }

  function OnClickBlank() {
    console.log('blank');
    ResetAllElement();
  };
  function closeMeasure() {
    var dom = document.getElementById('measure')
    dom.style.display = "none"
  };
  function OnMeasureResult(result) {
    var rArray = new Array();
    rArray = result.toString().split(",");
    var dom = document.getElementById('measure')
    dom.style.display = "block"
    var measureValue = document.getElementById('measureTxt')
    if (measureType == '0') {
      if (lang === 'en') {
        measureValue.innerText = 'Distance between two points is' + rArray[0] + 'meters(purple lines),' + 'X-axis distance between two points is' + rArray[1] + 'meters(red lines),' + 'Y-axis distance between two points is' + rArray[2] + 'meters(green lines),' + 'Z-axis distance between two points is' + rArray[3] + 'meters(blue lines)'
      } else if (lang === 'zh') {
        measureValue.innerText = '两点距离为' + rArray[0] + '米(紫色线条),' + '两点X轴距离为' + rArray[1] + '米(红色线条),' + '两点Y轴距离为' + rArray[2] + '米(绿色线条)，' + '两点Z轴距离为' + rArray[3] + '米(蓝色线条)'
      } else if (lang === 'jap') {
        measureValue.innerText = '2点間の距離は' + rArray[0] + 'M(パープルライン),' + '2点間のX軸距離は' + rArray[1] + 'M(赤い線),' + '2点間のY軸距離' + rArray[2] + 'M(緑の線),' + '2点間のZ軸距離' + rArray[3] + 'M(青い線)'
      }
    } else if (measureType == '1') {
      if (lang === 'en') {
        measureValue.innerText = 'Angle is' + rArray[0] + 'degree'
      } else if (lang === 'zh') {
        measureValue.innerText = '角度为' + rArray[0] + '度'
      } else if (lang === 'jap') {
        measureValue.innerText = '角度は' + rArray[0] + '学位'
      }
    } else if (measureType == '2') {
      if (lang === 'en') {
        measureValue.innerText = 'Area is' + rArray[0] + 'square meter'
      } else if (lang === 'zh') {
        measureValue.innerText = '面积为' + rArray[0] + '平方米'
      } else if (lang === 'jap') {
        measureValue.innerText = 'エリアは' + rArray[0] + '平方メートル'
      }
    } else if (measureType == '3') {
      if (lang === 'en') {
        measureValue.innerText = 'Volume is' + rArray[0] + 'cubic meter'
      } else if (lang === 'zh') {
        measureValue.innerText = '体积为' + rArray[0] + '立方米'
      } else if (lang === 'jap') {
        measureValue.innerText = 'ボリュームは' + rArray[0] + '立方メートル'
      }
    } else if (measureType == '4') {
      dom.style.display = "none"
    }
  };

  function OnHtmlUpdate() {
    if (delMarker.length > 0) {
      RemoveMarker(delMarker[0])
      delMarker = []
    }
    if (meterArray.length > 0) {
      var showNum = 16000
      var meters = ''
      var meterPos = ''
      for (var i = 0; i < meterArray.length; i++) {
        meters = document.getElementById(meterArray[i].id)
        var distance = GetDistanceFromCamera(meterArray[i].pos)
        meterPos = Get2dPosBy3dPos(meterArray[i].pos)
        if (distance > showNum) {
          getScale = 0
        } else {
          getScale = 1 - distance * (1 / showNum)
        }
        if (getScale >= 0) {
          meters.style.transform = 'scale(' + getScale + ')'
          meters.style.opacity = '1'
          meters.style.transformOrigin = '-' + (83 + getScale * 80) + 'px 125px'
        }
      }

    } else if (dcsArray.length > 0) {
      var showNum = 18000
      var meters = ''
      var meterPos = ''
      for (var i = 0; i < dcsArray.length; i++) {
        meters = document.getElementById(dcsArray[i].id)
        var distance = GetDistanceFromCamera(dcsArray[i].pos)
        meterPos = Get2dPosBy3dPos(dcsArray[i].pos)
        if (distance >= showNum) {
          getScale = 0
        } else {
          getScale = 1 - distance * (1 / showNum)
        }
        if (getScale >= 0) {
          meters.style.transform = 'scale(' + getScale + ')'
          meters.style.opacity = '1'
          meters.style.transformOrigin = '-' + (83 + getScale * 80) + 'px 125px'
        }
      }
    }

  }
  function deleteTag() {
    // $.ajax({
    //   url: window.R_config.spc_url + '/api/warnMark/DelWarnMark',
    //   type: 'POST',
    //   async: false,
    //   contentType: 'application/json;charset=utf-8',
    //   headers: {
    //     'Access-Control-Allow-Origin': '*'
    //   },
    //   data: JSON.stringify({
    //     ID: tagId
    //   }),
    //   dataType: 'json',
    //   success: (data) => {
    //     if (data.code === 0) {
    //       console.log(data)
    //       RemoveMarker(JSON.stringify(tagData))
    //       for (var i = 0; i < delMarker.length; i++) {
    //         RemoveMarker(delMarker[i])
    //       }
    //       markerArray = []
    //     }
    //   },
    //   error: () => {
    //     return false
    //   }
    // })
  }
  function viewTag() {
    var viewDiv = document.getElementById('view_tag')
    var viewImg = document.getElementById('view_img')
    viewDiv.style.display = 'block'
    viewImg.setAttribute('src', tagImg)
  }
  function closeView() {
    var viewDiv = document.getElementById('view_tag')
    viewDiv.style.display = 'none'
  }
  function OnMarkerClick(result) {
    if (delMarker.length > 0) {
      for (var i = 0; i < delMarker.length; i++) {
        RemoveMarker(delMarker[i])
      }
      delMarker = []
    }
    console.log(result)
    if (JSON.parse(result) instanceof Object && delMarkPer) {
      tagData = JSON.parse(result)
      tagId = tagData.id
      tagImg = tagData.img
      var htmlStr = `<div class="tag-btns">
        <div class="del-btn" onclick='deleteTag()'>削除标签</div>
        <div class="view-btn" onclick='viewTag()'>预览标签</div>
        </div>`;
      AddHtmlMarker(tagData.pos, htmlStr, 'delmarker' + delMarker.length);
      delMarker.push('delmarker' + delMarker.length)
      // deleteTag(result)
    }
  }

  function TestFun() {
    TestFunction();
  }

  function OnGridIntersectionClick(result) {
    var rArray = new Array();
    rArray = result.toString().split(",");
    // myapp.$notify({
    //   title: '当前位置',
    //   message: '\'' + rArray[0] + '\'轴线与\'' + rArray[1] + '\'轴线的交点',
    //   duration: 5000,
    //   offset: 50,
    //   type: 'success'
    // });

  };
  function Refresh() {
    RemoveJoyStick();
    SetCameraMode(0);
    ResetClip();
    StopViewAnimation();
    SetView(window.R_config.initView)
    ResetAllElement();
    StopMeasure();
    Blow(0);
    for (var i = 0; i < nameArray.length; i++) {
      SetModelNomal('tag' + i);
    }
    for (var i = 0; i < markerArray.length; i++) {
      RemoveMarker(markerArray[i]);
    }
    markerArray = [];
    if (delMarker.length > 0) {
      for (var i = 0; i < delMarker.length; i++) {
        RemoveMarker(delMarker[i])
      }
      delMarker = []
    };
    document.getElementById('measure').style.display = 'none'
  }

  /**
   * 事件监听  
   * {
   *    action: "",
   *    data: {
   *    }
   * }
   */
  window.addEventListener('message', (e) => {
    console.log("message - message");
    console.log(e.data);
    if (e.data.action == "first-test-action") {
      sendMsgToParent("second-test-action", {
        msg: "second-test-action"
      })
    } else if (e.data.action == "change-viewport") {
      resetView();
      StopViewAnimation();
      StartViewAnimation([window.R_config.initView, e.data.data.position], 1000);
    } else if (e.data.action == "get-viewport") {
      let tempdata = GetView();
      console.log("get-viewport :: " + tempdata)
    } else if (e.data.action == "search-point") {
      // FlyTo(e.data.data.glids, true, 2.8)
      SetElementColor(e.data.data.glids, 255, 0, 0)
    } else if (e.data.action == "add-balltag") {
      addBallLabel(e.data.data);
    }
  });

  function sendMsgToParent(inAction, inData) {
    window.parent.postMessage({
      action: inAction,
      data: inData
    })
  }

  // type circle  diamond  square
  function addBallLabel(row) {
    console.log("addLabel");
    //    SetElementColor(glids, 255, 0, 0);
    // debugger
    type = "circle";
    let htmlStr = "";
    htmlStr += ` <div class="scene_ball" onclick="onLabelClick(${row.glid})"> `;
    htmlStr += ` <div class='ball_${row.type}'> `;
    htmlStr += ` <p class="${row.type == 'diamond' ? 'ball_diamond_text' : 'ball_common_text' }">${row.ID}</p> `; // 
    htmlStr += ` </div> `; 
    htmlStr += ` <div class="ball_line">`; // ball_diamond_text

    htmlStr += `</div> `;

    // let tempCurrentPos = GetCenterById(glids);
    let tempCurrentPos = row.position;

    AddHtmlMarker(
      tempCurrentPos,
      htmlStr,
      "marker" + markerArray.length
    );
    markerArray.push("marker" + markerArray.length);
  }

  function addLabel(row, glids, type) {
    console.log("addLabel");
    SetElementColor(glids, 255, 0, 0);

    let htmlStr =
      `<div id="tips_show" class='tips_show' onclick="onLabelClick('${row.DeviceName.trim()}','${glids}')">
					<div class="tips_parent">
						
						<image class="tip-icon" src="${getStatus(row) ? './img/1.png' : './img/8.png'} "></image>
						
						<div class="tips-cont">
							<p id='DeviceName_${row.ID}' class='p-text-first'>${row.DeviceName}</p>
							
							<p class="p-text-other" id='QValue_${row.ID}'>${row.QValue}${row.Unit || ""}</p>
						</div>
					</div>
          <span class="line" style="background:#ff0000;height:'164px'}"></span>
				</div>`;

    // let 


    currentPos = GetCenterById(glids);

    clickGlids = glids;
    AddHtmlMarker(
      currentPos,
      htmlStr,
      "marker" + markerArray.length
    );
    markerArray.push("marker" + markerArray.length);
  }

  function getStatus(row) {
    if (
      parseFloat(row.QValue) < parseFloat(row.OfflineValues) ||
      parseFloat(row.QValue) > parseFloat(row.OnlineValue)
    ) {
      return true;
    } else {
      return false;
    }
  }


</script>

</html>